<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>小米官网</title>
    <link rel="stylesheet" href="./css/index.css">
    <link rel="stylesheet" href="./css/basis.css">
</head>

<body>
    <div id="app">
        <div class="fix-tool">
            <a target="_blank" href="https://blog.csdn.net/jbj6568839z">导航1</a>
            <a target="_blank" href="https://blog.csdn.net/jbj6568839z">导航2</a>
            <a target="_blank" href="https://blog.csdn.net/jbj6568839z">导航3</a>
            <a target="_blank" href="https://blog.csdn.net/jbj6568839z">导航4</a>
            <a target="_blank" href="https://blog.csdn.net/jbj6568839z">导航5</a>
        </div>
        <div class="main-header">
            <div class="main-nav">
                <div class="list">
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">小米商城</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">MIUI</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">IoT</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">金融</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">有品</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">小爱开放平台</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">企业团购</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">资质证照</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">协议规则</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">下载app</a>
                </div>
                <div class="login">
                    <div class="item">登陆</div>
                    <div class="item">注册</div>
                    <div class="item">消息通知</div>
                </div>
            </div>
        </div>
        <div class="main-body">
            <!-- 盒子一  -->
            <div class="container-1">
                <img src="./img/logo-1.jpg">
                <div class="nav-list">
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">小米手机 </a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">Redmi 红米</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">电视</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">笔记本</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">家电</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">路由器</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">智能硬件</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">服务</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">社区</a>
                </div>
                <input type="text" placeholder="小米电视 小米音响">
                <a class="hid-content" target="_blank" href="https://blog.csdn.net/jbj6568839z">
                    <div class="item">
                        <img src="./img/hid-1.jpg" alt="">
                        <p>小米全面屏电视 E55A</p>
                        <p>1799元</p>
                    </div>
                    <div class="item">
                        <img src="./img/hid-1.jpg" alt="">
                        <p>小米全面屏电视 E55A</p>
                        <p>1799元</p>
                    </div>
                    <div class="item">
                        <img src="./img/hid-1.jpg" alt="">
                        <p>小米全面屏电视 E55A</p>
                        <p>1799元</p>
                    </div>
                    <div class="item">
                        <img src="./img/hid-1.jpg" alt="">
                        <p>小米全面屏电视 E55A</p>
                        <p>1799元</p>
                    </div>
                    <div class="item">
                        <img src="./img/hid-1.jpg" alt="">
                        <p>小米全面屏电视 E55A</p>
                        <p>1799元</p>
                    </div>
                    <div class="item">
                        <img src="./img/hid-1.jpg" alt="">
                        <p>小米全面屏电视 E55A</p>
                        <p>1799元</p>
                    </div>
                </a>
            </div>
            <!-- 盒子二  -->
            <div class="container-2">
                <ul class="left-nav">
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">手机 电话卡</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">电视 盒子</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">笔记本 显示器 平板</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">家电 插线板</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">出行 穿戴</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">智能 路由器</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">电源 配件</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">健康 配件</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">耳机 音箱</a>
                    <a class="item" target="_blank" href="https://blog.csdn.net/jbj6568839z">生活 箱包</a>
                    <div class="hid-content">
                        
                    </div>
                </ul>
                <div id="slider-box" class="slider-box slider-box-1">
                    <div class="switch">
                        <span class="btn" id="per" onclick="pre()">左</span>
                        <span class="btn" id="next" onclick="next()">右</span>
                    </div>
                    <ul class="nav">
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                        <li></li>
                    </ul>
                </div>
            </div>
            <!-- 盒子三  -->
            <div class="container-3">
                <div class="nav-list">
                    <div class="item">
                        <img class="icon"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
                        <span>小米秒杀</span>
                    </div>
                    <div class="item">
                        <img class="icon"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
                        <span>小米秒杀</span>
                    </div>
                    <div class="item">
                        <img class="icon"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
                        <span>小米秒杀</span>
                    </div>
                    <div class="item">
                        <img class="icon"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
                        <span>小米秒杀</span>
                    </div>
                    <div class="item">
                        <img class="icon"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
                        <span>小米秒杀</span>
                    </div>
                    <div class="item">
                        <img class="icon"
                            src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/82abdba456e8caaea5848a0cddce03db.png?w=48&h=48">
                        <span>小米秒杀</span>
                    </div>
                </div>
                <img class="img-con-3" src="./img/con-3-1.jpg">
                <img class="img-con-3" src="./img/con-3-2.jpg">
                <img class="img-con-3" src="./img/con-3-3.jpg">
            </div>
            <!-- 盒子四  -->
            <div class="container-4">
                <div class="box">
                    <div class="title">小米闪购</div>
                    <div class="content">
                        <div class="item item-1">
                            <div class="img"></div>
                            <p class="name">小米净水器500G 白色</p>
                            <p>感应出泡，高效清洁</p>
                            <div class="price"><span class="price-now">888元</span><span class="price-last">1120元</span>
                            </div>
                        </div>
                        <div class="item item-2">
                            <div class="img"></div>
                            <p class="name">小米净水器500G 白色</p>
                            <p class="desc">感应出泡，高效清洁</p>
                            <div class="price"><span class="price-now">888元</span><span class="price-last">1120元</span>
                            </div>
                        </div>
                        <div class="item item-3">
                            <div class="img"></div>
                            <p class="name">小米净水器500G 白色</p>
                            <p class="desc">感应出泡，高效清洁</p>
                            <div class="price"><span class="price-now">888元</span><span class="price-last">1120元</span>
                            </div>
                        </div>
                        <div class="item item-4">
                            <div class="img"></div>
                            <p class="name">小米净水器500G 白色</p>
                            <p class="desc">感应出泡，高效清洁</p>
                            <div class="price"><span class="price-now">888元</span><span class="price-last">1120元</span>
                            </div>
                        </div>
                        <div class="item item-5">
                            <div class="img"></div>
                            <p class="name">小米净水器500G 白色</p>
                            <p class="desc">感应出泡，高效清洁</p>
                            <div class="price"><span class="price-now">888元</span><span class="price-last">1120元</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 盒子五  -->
            <div class="container-5">
                <img src="./img/banner-2.jpg" alt="">
            </div>
            <!-- 盒子六  -->
            <div class="container-6">
                <div class="box">
                    <div class="title">
                        <span>手机</span>
                        <span>查看全部</span>
                    </div>
                    <div class="content">
                        <img class="phone-img" src="./img/phone-logo.jpg" alt="">
                        <div class="phone-box">
                            <div class="item">
                                <img src="./img/phone-1.jpg" alt="">
                                <p class="name">小米CC9 Pro</p>
                                <p class="desc">1亿像素 五摄四像</p>
                                <p class="price">2799元起</p>
                            </div>
                            <div class="item">
                                <img src="./img/phone-1.jpg" alt="">
                                <p class="name">小米CC9 Pro</p>
                                <p class="desc">1亿像素 五摄四像</p>
                                <p class="price">2799元起</p>
                            </div>
                            <div class="item">
                                <img src="./img/phone-1.jpg" alt="">
                                <p class="name">小米CC9 Pro</p>
                                <p class="desc">1亿像素 五摄四像</p>
                                <p class="price">2799元起</p>
                            </div>
                            <div class="item">
                                <img src="./img/phone-1.jpg" alt="">
                                <p class="name">小米CC9 Pro</p>
                                <p class="desc">1亿像素 五摄四像</p>
                                <p class="price">2799元起</p>
                            </div>
                            <div class="item">
                                <img src="./img/phone-1.jpg" alt="">
                                <p class="name">小米CC9 Pro</p>
                                <p class="desc">1亿像素 五摄四像</p>
                                <p class="price">2799元起</p>
                            </div>
                            <div class="item">
                                <img src="./img/phone-1.jpg" alt="">
                                <p class="name">小米CC9 Pro</p>
                                <p class="desc">1亿像素 五摄四像</p>
                                <p class="price">2799元起</p>
                            </div>
                            <div class="item">
                                <img src="./img/phone-1.jpg" alt="">
                                <p class="name">小米CC9 Pro</p>
                                <p class="desc">1亿像素 五摄四像</p>
                                <p class="price">2799元起</p>
                            </div>
                            <div class="item">
                                <img src="./img/phone-1.jpg" alt="">
                                <p class="name">小米CC9 Pro</p>
                                <p class="desc">1亿像素 五摄四像</p>
                                <p class="price">2799元起</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 小米官网的中间部分大同小异，甚至是粘贴复制盒子六都可以还愿的差不多，跳过！ -->
            <!-- 盒子七  -->
            <div class="container-7">
                <img src="./img/banner-1.jpg" alt="">
            </div>
        </div>
        <div class="main-footer">
            <div class="container">
                <div class="nav">
                    <div class="item">预约维修服务</div>
                    <div class="item">7天无理由退货</div>
                    <div class="item">15天免费换货</div>
                    <div class="item">满150元包邮</div>
                    <div class="item" >520余家售后网点</div>
                </div>
                <div class="feature-box">
                    <div class="feature">
                        <dl class="item">
                            <dt>帮助中心</dt>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                        </dl>
                        <dl class="item">
                            <dt>帮助中心</dt>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                        </dl>
                        <dl class="item">
                            <dt>帮助中心</dt>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                        </dl>
                        <dl class="item">
                            <dt>帮助中心</dt>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                        </dl>
                        <dl class="item" style="border-right: 1px solid #ccc;">
                            <dt>帮助中心</dt>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                            <dd>账户管理</dd>
                        </dl>
                    </div>
                    <div class="service">
                        <p class="center">WX: j565017805</p>
                        <p class="center">CSDN:https://blog.csdn.net/jbj6568839z<br/>欢迎点赞！！！</p>
                        <p class="center">博健</p>
                    </div>
                </div>
            </div>
        </div>
        <img class="footer-img" src="./img/footer.png" alt="">
    </div>

    <script src="./js/index.js"></script>
</body>

</html>